<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>路面勘测</title>
  <!-- 重置样式，使得各浏览器样式更一致 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
  <!-- vant样式 -->
  <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css" />
  <!-- 自定义样式 -->
  <link rel="stylesheet" href="./style/common.css" />
</head>

<body>

  <body>
    <div id="app" class="road-survey">
      <iframe :src="`./html/${iframeList[activeTabbar]}.html`" class="iframe-content"></iframe>
      <div class="road-survey-bottom">
        <van-tabbar v-model="activeTabbar">
          <van-tabbar-item icon="home-o">信息录入</van-tabbar-item>
          <van-tabbar-item icon="label-o">核对</van-tabbar-item>
          <van-tabbar-item icon="search">预览</van-tabbar-item>
          <van-tabbar-item icon="setting-o">设置</van-tabbar-item>
        </van-tabbar>
      </div>
    </div>
  </body>
</body>
<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>
<script>
  const { createApp, ref, nextTick, reactive, onMounted, onUnmounted, computed, watch } = Vue
  const app = Vue.createApp({
    setup() {
      // 当前激活栏的tabbar
      const activeTabbar = ref(0)

      const iframeList = {
        0: 'dataInput',
        1: 'dataCheck',
        2: 'dataView',
        3: 'setting'
      }
      
      return {
        activeTabbar,
        iframeList
      }
    }
  })
  app.use(vant);
  app.use(vant.Lazyload);
  app.mount("#app");
</script>

</html>